/* 浏览器DOM操作API */
/* DOM操作API */

import { Types } from "../组件化/render.js";

/**
 * @description 创建元素
 * @param {*} tag 标签名
 * @returns { Element }
 */
export function createElement(tag) {
  console.log(`创建元素：${tag}`);
  return document.createElement(tag);
}
/**
 * @description 设置元素的文本内容
 * @param {*} el 元素
 * @param {*} text 文本内容
 */
export function setElementText(el, text) {
  console.log(`设置 ${el.tagName} 元素的文本内容：${text}`);
  el.textContent = text;
}
/**
 * @description 将元素插入到容器的参照元素前，如果没有参照元素，则插入到容器的末尾位置
 * @param {*} el 元素
 * @param {*} parent 容器
 * @param {*} anchor 参照元素
 */
export function insert(el, parent, anchor = null) {
  console.log(parent);
  parent.insertBefore(el, anchor);
}

/**
 * @description 创建文本节点
 * @param {*} text 文本内容
 * @returns
 */
export function createText(text) {
  return document.createTextNode(text);
}

/**
 * @description 设置文本节点内容
 * @param {*} el 文本节点
 * @param {*} text 文本内容
 */
export function setText(el, text) {
  el.nodeValue = text;
}

/**
 * @description 创建注释节点
 * @param {*} text 注释内容
 * @returns
 */
export function createComment(text) {
  return document.createComment(text);
}

/**
 * @description 卸载虚拟节点
 * @param {*} vnode 虚拟DOM节点
 */
export function unmount(vnode) {
  /* 片段 */
  if (vnode.type === Types.FRAGEMENT) {
    vnode.children.forEach((child) => options.unmount(child));
    return;
  }
  /* 卸载组件 */
  if (typeof vnode.type === "object") {
    /* 如果组件是被keepalive的 */
    if (vnode.shouldKeepAlive) {
      console.log(vnode.component);
      console.log(vnode.keepAliveInstance);
      vnode.keepAliveInstance._deActivate(vnode);
    } else {
      unmount(vnode.component.vnode);
    }

    return;
  }

  /* 拿到vnode对应的真实dom元素 */
  const el = vnode.el;
  /* 拿到父元素 */
  const parent = el.parentNode;

  /* 需要添加过渡效果的元素 */
  const needTransition = vnode.transition;

  if (parent) {
    const performRemove = () => parent.removeChild(el);
    if (needTransition) {
      vnode.transition.leave(el, performRemove);
    } else {
      performRemove();
    }
  }
}
